import React from 'react';
import {Link} from 'react-router-dom';
import {Table, Divider, Popover, Popconfirm, Pagination} from 'antd';
import cssModules from 'react-css-modules';
import styles from './style.less';
import {random6} from '../../util/tool.js';
import classnames from 'classnames';
import {inject, observer} from 'mobx-react';

@inject('DeviceStore')
@cssModules(styles)
class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.DeviceStore;
  }
  onChange = pageNumber => {
    const {tableParams, getDeviceInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: pageNumber,
    };
    getDeviceInfo(params);
  };
  onShowSizeChange = (current, pageSize) => {
    const {tableParams, getDeviceInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: current,
      pageSize: pageSize,
    };
    getDeviceInfo(params);
  };
  createColumns() {
    const {onUnbundling} = this.store;
    const columns = [
      {
        title: '设备类型',
        dataIndex: 'deviceType',
        align: 'center',
      },
      {
        title: '所属户室',
        dataIndex: 'blockAndUnit',
        align: 'center',
      },
      {
        title: '所属位置',
        dataIndex: 'location',
        align: 'center',
      },
      {
        title: '唯一码',
        dataIndex: 'deviceId',
        align: 'center',
      },
      {
        title: '注册时间',
        dataIndex: 'bindTime',
        align: 'center',
      },

      {
        title: '设备状态',
        dataIndex: 'deviceStatus',
        align: 'center',
        render: (text, record) => {
          return <span>{text ? '已绑定' : '未绑定'}</span>;
        },
      },

      {
        title: '操作',
        align: 'center',
        render: (text, record) => {
          return (
            <span>
              {!record.pushStatus && (
                <span
                  className={classnames(
                    styles['unbind-padding'],
                    record.deviceStatus && styles['unbind'],
                  )}
                  onClick={() => {}}>
                  <Popconfirm
                    title="确定解绑吗?"
                    onConfirm={() => {
                      onUnbundling({deviceId: record.deviceId});
                    }}
                    okText="确定"
                    cancelText="取消">
                    <i className={classnames('iconfont iconjiebang')}></i>
                    <span>解绑</span>
                  </Popconfirm>
                </span>
              )}
            </span>
          );
        },
      },
    ];

    return columns;
  }

  render() {
    const {tableData, loading} = this.store;
    let scope = this;
    return (
      <Table
        styleName={'table-wrap'}
        columns={this.createColumns()}
        dataSource={tableData.data}
        loading={loading}
        pagination={{
          total: tableData.total || 0,
          pageSize: parseInt(tableData.pageSize),
          current: parseInt(tableData.pageNo),
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: total => {
            return `共 ${total} 条`;
          },
          onChange: this.onChange,
          onShowSizeChange: this.onShowSizeChange,
        }}
        rowKey={(record, index) => {
          return `${random6()}${index}`;
        }}
      />
    );
  }
}

export default DataTable;
